<template>
	<div style="width: 100%;overflow: auto;" :style="componentModel.cssStyle">
		<h3>{{componentModel.title}}</h3>
		<el-table :data="dataList" style="width: 100%;" size="mini" border="true" stripe="true" :cell-style="tableCellStyleFn">
			<el-table-column
			v-for="item in fieldList" :key="item.columnName" :prop="item.columnName" :label="item.name">
			<template #default="scope" v-if="item.viewType=='tag'">
				<el-tag type="success" size="mini">{{scope.row[item.columnName]}}</el-tag>
			</template>
			<template #default="scope" v-else-if="item.viewType=='switch'">
				<el-switch v-model="scope.row[item.columnName]">
				</el-switch>
			</template>
			</el-table-column>
		</el-table>
		<el-pagination background layout="prev, pager, next" :total="total" :page-size="10" v-model:current-page="currentPage" @current-change="currentPageChange">
		</el-pagination>
	</div>
</template>

<script>
	import utils from '@/utils/utils.js';
	import {
		sendComponentEventRequest
	} from '@/utils/requestUtils.js';
	export default {
		name: "DetailReportComponent",
		props: ["previewMode","componentModel"],
		data() {
			return {
				dataList: [],
				fieldList:[],
				total:0,
				currentPage:1,
				styleMap:{},
			}
		},inject:['children'],
		mounted() {
			this.children.push(this);
		},beforeUnmount() {
			utils.removeArrayElement(this.children,this);
		},
		methods: {
			setProp(prop){
				var detailReportModel=prop["detailReportModel"];
				if(detailReportModel!=undefined){
					this.dataList=detailReportModel.tableData.data;
					this.fieldList=detailReportModel.fieldList;
					this.styleMap=detailReportModel.styleMap;
					this.total=detailReportModel.tableData.total;
					this.currentPage=detailReportModel.tableData.page;
				}else if(detailReportModel==null){
					this.dataList=[];
					this.fieldList=[];
					this.total=0;
					this.currentPage=1;
				}
			},
			currentPageChange(){
				if(this.previewMode){
					this.$emit("pageChange",this.currentPage);
					return;
				}
				var data={};
				data[this.componentModel.id+"_page"]=this.currentPage;
				sendComponentEventRequest(this, "pageEvent",data);
			},setData(tableData,styleMap){
				this.styleMap=styleMap;
				this.dataList=tableData.data;
				this.total=tableData.total;
				if(tableData.page!=this.currentPage){
					this.currentPage=tableData.page;
				}
			},setFieldList(fieldList){
				this.fieldList=fieldList;
			},tableCellStyleFn(argsObj){
				return this.styleMap[argsObj.rowIndex+"_"+argsObj.columnIndex];
			}
		}
	}
</script>

<style>
</style>
